<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义checkbox,radio样式</title>
    <style>
	/* 思路：
		1.将input默认都隐藏，根据checked伪类，来对label 标签做背景图的切换，达到改变样式的效果
	*/
		.radio1,
		.radio2,
		.check1,
		.check2 {
			display: inline-block;
			width: 16px;
			height: 16px;
		}
		
		.radio1 {
			background: url(../images/custom-sel.png) no-repeat -24px -10px;
		}
		.radio2 {
			background: url(../images/custom-sel.png) no-repeat -24px -10px;
		}
		#radio1:checked ~ .radio1,
		#radio2:checked ~ .radio2 {
			background: url(../images/custom-sel.png) no-repeat -59px -10px;
		}

		.check1 {
			background: url(../images/custom-sel.png) no-repeat -24px -32px;
		}

		.check2 {
			background: url(../images/custom-sel.png) no-repeat -24px -32px;
		}
		
		#check1:checked ~ .check1,
		#check2:checked ~ .check2 {
			background: url(../images/custom-sel.png) no-repeat -59px -32px;
		}

		input {
			display: none;
		}
	
	/* 思路：
		2.将input默认都隐藏，对label加伪元素，并设置背景，同时在input被选中的时候改变伪元素的背景
	*/
		
		
		.radio3::before,
		.radio4::before,
		.check3::before,
		.check4::before {
			display: inline-block;
			content: "";
			width: 16px;
			height: 16px;
		}
		
		.radio3::before,
		.radio4::before {
			background: url(../images/custom-sel.png) no-repeat -24px -10px;
		}
		
		#radio3:checked ~ .radio3::before,
		#radio4:checked ~ .radio4::before {
			background: url(../images/custom-sel.png) no-repeat -59px -10px;
		}

		.check3::before,
		.check4::before {
			background: url(../images/custom-sel.png) no-repeat -24px -32px;
		}
		
		#check3:checked ~ .check3::before,
		#check4:checked ~ .check4::before {
			background: url(../images/custom-sel.png) no-repeat -59px -32px;
		}

    </style>
</head>
<body>
	
	<!--思路一-->
	<p>方法一</p>
<div id="demo1">
	<!-- 两个单选框 -->
	<input type="radio" name="radio1" id="radio1">
	<label class="radio1" for="radio1"></label>

    <input type="radio" name="radio1" id="radio2">
	<label class="radio2" for="radio2"></label>
	<br>
	<!--两个复选框-->
	
    <input type="checkbox" name="check1" id="check1">
	<label class="check1" for="check1"></label>

    <input type="checkbox" name="check2" id="check2">
	<label class="check2" for="check2"></label>
</div>	

	<!--思路二-->
	<p>方法二</p>
<div id="demo2">
	<!-- 两个单选框 -->
	<input type="radio" name="radio3" id="radio3">
	<label class="radio3" for="radio3"></label>

    <input type="radio" name="radio3" id="radio4">
	<label class="radio4" for="radio4"></label>
	<br>
	<!--两个复选框-->
	
    <input type="checkbox" name="check4" id="check3">
	<label class="check3" for="check3"></label>

    <input type="checkbox" name="check4" id="check4">
	<label class="check4" for="check4"></label>
</div>

</body>
</html>